import React from 'react';
import PageTile from 'component/page-title/index.jsx';
import {Link} from 'react-router-dom';
import './index.scss';
//引入商品查询组件
import SearchProduct from './searchProduct.jsx';
//引入通用列表组件
import TableList from 'tool/table-list/index.jsx';
//引入封装的分页组件
import Pagination from 'tool/pagination.jsx';
import Product from  'service/product-service.jsx';
import Tool from  'tool/tool.jsx';
const _product = new Product();
const _req = new Tool();

class ProductList extends React.Component{
  constructor(props){
    super(props);
    //要给list初始化成数组，不然不能调用map
    //添加listType字段，用来判断加载商品列表是全部，还搜索
    this.state={
      list: [],
      pageNum: 1,
      listType: 'list',
    }
    this.loadProductList = this.loadProductList.bind(this);
  }
  componentDidMount(){
    this.loadProductList();
  }
  //获取商品列表
 loadProductList(){
   //listParam设为对象
   let listParam = {};
   listParam.listType= this.state.listType;
   listParam.pageNum = this.state.pageNum;
   //是搜索时才传递查询类型和值
   if(this.state.listType == 'search'){
    listParam.searchType= this.state.searchType;
    listParam.searchValue= this.state.searchValue;
   }
   //请求接口
    _product.getProductList(listParam).then(res => {
      this.setState(res);
    },errMsg => {
        this.setState({
          list: []
        })
        _req.errorTips(errMsg);
    });
 }
  //商品查询
  onSearch(searchType,searchValue){
    //只有点击查询时才修改listType
    let listType = searchValue === '' ? 'list' : 'search';
    this.setState({
        listType: listType,
        pageNum: 1,
        searchType: searchType,
        searchValue: searchValue
    },()=>{
      this.loadProductList();
    }) ;
   
  }
 //页数改变发生改变时,修改当前页,setState是异步函数
 onPageNumChange(Num){
  this.setState({
    pageNum: Num
  },() => {
    this.loadProductList();
  })
 }
 //改变商品状态,上架、下架操作比较敏感，操作前给出提示，以防误操作
 setProductStatus(productId,currentStatus){
  let newStatus = currentStatus == 1 ? 2 : 1,
        confirm = currentStatus == 1 ? '确认要下架该商品?' : '确认要上架该商品?';
  if(window.confirm(confirm)){
    _product.changeProductStatus({
      productId: productId,
      status: newStatus
    }).then(res=>{
      _req.successTips(res);
      //重新加载商品列表
      this.loadProductList();
    },errMsg=>{
      _req.errorTips(errMsg);
    })
  }
 }
 render(){ 
   let tableHeaders=[
     {name:'ID', width:'6%'},
     {name:'商品信息', width:'44%'},
     {name:'价格', width:'10%'},
     {name:'状态', width:'20%'},
     {name:'操作', width:'20%'}
   ]
  return(
            <div id="page-wrapper">
              <PageTile title='商品列表'>
                <div className="page-header-add">
                  <Link to='/product/save' className='btn btn-primary btn-add'>
                    <i className="fa fa-plus" aria-hidden="true"></i>
                    <span>添加商品</span> 
                  </Link>
                </div>
              </PageTile>
              <SearchProduct onFatherSearch={(searchType,searchValue)=>{this.onSearch(searchType,searchValue)}}/>
              <TableList tableHeaders={tableHeaders}>
                {
                  this.state.list.map((product,index)=>
                           (
                              <tr key={index}>
                                  <td>{product.id}</td>
                                  <td>
                                    <p>{product.name}</p>
                                    <p>{product.subtitle}</p>
                                  </td>
                                  <td>￥{product.price}</td>
                                  <td>
                                    <span>{product.status == 1 ? '在售' : '已下架'}</span>
                                    <button onClick={(e)=>{this.setProductStatus(product.id,product.status)}} className="butt btn btn-warning btn-xs">{product.status == 1 ? '下架' : '上架'}</button>
                                  </td>
                                  <td>
                                    <Link className="operate-box" 
                                          to={{ pathname: `/product/detail/${product.id}`,state: {pid:product.id} }}>查看详情 </Link>
                                    <Link className="operate-box"  
                                          to={{ pathname: `/product/save/${product.id}`,state: {pid:product.id} }}>编辑</Link>
                                  </td>
                              </tr>
                            )
                         )
                }
              </TableList>
              <Pagination current={this.state.pageNum} 
                          total={this.state.total}
                          onChange={pageNum=> this.onPageNumChange(pageNum)}/>
            </div>
      );
    }
}

export default ProductList;
